<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客主页</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
    <style>
        body {
            color: #333;
            margin-top: 20px;
        }

        .container-flex {
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            gap: 20px;
        }

        .sidebar {
            width: 20%;
            min-width: 180px;
            background: #f9f9f9;
            color: #333;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }

        .content {
            width: 56%;
            background: #fff;
            color: #333;
            padding: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }

        .panel {
            margin-bottom: 20px;
        }

        .panel-heading {
            background-color: #f9f9f9;
            color: #333;
            padding: 10px;
            border-bottom: 1px solid #ddd;
        }

        .list-group-item {
            border: 1px solid #ddd;
            padding: 10px;
            background: #fff;
        }

        .list-group-item-heading {
            margin: 0;
            color: #333;
        }

        .list-group-item-text {
            color: #666;
            font-size: 14px;
        }

        .text-muted {
            color: #666;
            font-size: 12px;
        }

        .navbar {
            background-color: #333;
            color: #fff;
            margin-bottom: 20px;
        }

        .navbar-brand {
            color: #fff;
        }

        .navbar-nav > li > a {
            color: #fff;
        }

        .navbar-nav > li > a:hover {
            background-color: #555;
        }

        .footer {
            text-align: center;
            padding: 10px 0;
            background-color: #333;
            color: #fff;
            position: fixed;
            bottom: 0;
            width: 100%;
        }

        .brand-link {
            font-size: 24px; 
            font-weight: bold; 
        }

    </style>
</head>
<body>
    <nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header" style="width: 100%; text-align: center;">
            <a class="navbar-brand brand-link" href="/blog" style="color:white; float: none; display: inline-block;">博客——"张三"的主页</a>
        </div>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="login" style="font-size: 24px;font-weight: bold; color: white">登录</a></li>
        </ul>
    </div>
</nav>

    <!-- 三栏布局容器 -->
    <div class="container-flex">
        <!-- 左侧边栏：热门博主 -->
        <div class="sidebar">
            <h4>热门博主</h4>
            <ul class="list-group">
                {% for user in users %}
                <li class="list-group-item">
                    <a href="/blog/{{ user.id }}">{{ user.nickname }}</a>
                </li>
                {% endfor %}
            </ul>
        </div>

        <!-- 中间内容：最新博文 -->
        <div class="content">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">最新博文</h4>
                </div>
                <div class="panel-body">
                    <div class="list-group">
                        {% for article in latest_articles %}
                        <a href="/article" class="list-group-item">
                            <h4 class="list-group-item-heading">{{ article.title }}</h4>
                            <p class="list-group-item-text">{{ article.content[:100] }}...</p>
                            <small class="text-muted">发表于: {{ article.create_date }}</small>
                        </a>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧边栏：热门博文 -->
        <div class="sidebar">
            <h4>热门博文</h4>
            <ul class="list-group">
                {% for article in popular_articles %}
                <li class="list-group-item">
                    <a href="/article/{{ article.id }}">{{ article.title }}</a>
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>

    <footer class="footer">
        <p>© 2024 Mini Blog. All rights reserved.</p>
    </footer>

    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
</body>
</html>